.my-monitor-charts {
    display: flex;
    background-color: white;

    &.right-info {
        flex-direction: row;
    }

    &.bottom-info {
        flex-direction: column;
    }

    .chart-canvas-container {
        flex-grow: 1;
    }

    .chart-info {
        max-height: 100%;
        overflow: auto;
        overflow: hidden;
    }

    .statistic-container {
        // border: 1px solid #ccc;
        // position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;

        span {
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }

    @target-grow: 140;
    @value-grow: 40;

    @statistic-header-height: 21px;
    @statistic-scroll-width: 17px;

    .statistic-header {
        display: flex;
        font-size: 12px;
        padding-right: @statistic-scroll-width;
        height: @statistic-header-height;

        .header-target {
            flex-grow: 1;
            padding-left: 5px;
            // flex-grow: @target-grow;
            // flex-shrink: 0;
        }

        .header-value {
            // flex-grow: @value-grow;
            // flex-shrink: 0;
            min-width: 35px;
        }
    }

    .statistic-body {
        // top: @statistic-header-height;
        // left: 0;
        // bottom: 0;
        // right: @statistic-scroll-width;
        overflow: auto;

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        li {
            display: flex;

            &.unselect {
                color: rgb(228, 222, 222);
                text-decoration: line-through;
            }

            &.onlySelected .statistic-target {
                font-weight: bold;

                &:hover {
                    color: black;
                }
            }
        }

        .statistic-target {
            flex-grow: 1;
            font-size: 12px;
            padding-left: 5px;
            // flex-grow: @target-grow;
            // flex-shrink: 0;

            &:hover {
                cursor: pointer;
                color: #ccc;
            }
        }

        .statistic-value {
            // flex-grow: @value-grow;
            // flex-shrink: 0;
            font-size: 12px;
            color: #888;
            min-width: 35px;

            &:not(:last-child) {
                padding-right: 5px;
            }
        }
    }

    .tool-box-left-container {
        position: absolute;
        top: 5px;
        left: 5px;
        height: 20px;

        .icon-button {
            display: inline-block;
            width: 20px;
            height: 20px;
            // border: 1px solid #ccc;
            background-size: contain;
            cursor: pointer;

            &:hover {
                background-color: #ccc;
            }
        }

        .icon-button-fullscreen {
            background-image: url('../assets/images/fullscreen.png');
        }
    }

    .tool-box-right-container {
        display: none;
        position: absolute;
        top: 5px;
        right: 5px;
        // border: 1px solid;
        width: 135px;
        height: 20px;
        display: flex;

        .select-item {
            display: inline-block;
            text-align: center;
            font-size: 12px;
            flex-grow: 1;
            width: 33%;
            border: 1px solid #ccc;

            &:hover {
                cursor: pointer;
                background-color: #ccc;
            }

            &.selected {
                background-color: #1c52cc;
                color: white;
            }
        }
    }

    &.full-screen {
        @padding: 30px;
        position: fixed;
        z-index: 9999;
        width: calc(100vw - @padding * 2) !important;
        height: calc(100vh - @padding * 2) !important;
        padding-top: 10px;
        padding-bottom: 5px;
        top: @padding;
        left: @padding;

        border: 1px solid black;
        box-shadow: 3px 4px 14px 3px;
        // right: 0;
        // bottom: 0;

        .icon-button-fullscreen {
            background-image: url('../assets/images/unfullscreen.png');
        }
    }
}